import './index.less';
import React, { useEffect, useState } from 'react';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
} from '@ant-design/icons';
import {
  Layout,
  Popconfirm,
  Avatar,
  Button,
  ConfigProvider,
  message,
} from 'antd';
import AdminMenu from '@/components/adminMenu';
import zhCN from 'antd/lib/locale/zh_CN';
import logo from '../images/logo.png';
import { history } from '@/.umi/core/history';
import request from '@/http';
import SecurityService from '@/pages/login/service';
import TheaterMenu from '@/components/theaterMenu';

const { Content, Header, Sider } = Layout;
export default function Index(Props: any) {
  const [collapsed, setcollapsed] = useState(false); //控制菜单缩进
  const tiltes = () => {
    if (collapsed) return <img src={logo} />;
    else return <>好老师系统教师后台</>;
  };

  const Logout = async () => {
    SecurityService.DeleteSecurity();
    history.push('/login')
  };

  const menus = (loger: any) => {
    if (loger === 0) return <AdminMenu></AdminMenu>;
    else if (loger === 1) return <TheaterMenu></TheaterMenu>;
  };

  useEffect(() => {
    return () => {
      console.log('结束')
    }
  }, [])
  return (
    <ConfigProvider locale={zhCN}>
      <Layout id="root_2" style={{ minWidth: 1200 }}>
        <Sider
          width="260"
          theme="light"
          trigger={null}
          collapsed={collapsed}
          onCollapse={() => {
            setcollapsed(!collapsed);
          }}
        >
          <div className="logo">{tiltes()}</div>
          {menus(SecurityService.getSecurity().role)}
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }}>
            {React.createElement(
              collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
              {
                className: 'trigger',
                onClick: () => {
                  setcollapsed(!collapsed);
                },
              },
            )}
            <div className="topMessage">
              <Avatar
                style={{ backgroundColor: '#87d068', marginRight: 15 }}
                icon={<UserOutlined />}
              />
              <span>
                <Popconfirm
                  title="你确认退出吗?"
                  onConfirm={Logout}
                  okText="确认"
                  cancelText="取消"
                >
                  {SecurityService.getSecurity().name==null&&SecurityService.getSecurity().name==''?'':SecurityService.getSecurity().name}
                  <Button type="text" danger>
                    注销
                  </Button>
                </Popconfirm>
              </span>
            </div>
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px 0 16px',
              padding: '50px 25px 20px 25px',
            }}
          >
            {Props.children}
          </Content>
        </Layout>
      </Layout>
    </ConfigProvider>
  );
}
